<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>自定义动画</title>
	<style type="text/css">
	#main{
		width: 100px;height: 100px;background: red;position: absolute;
		left: 0;top: 0;

	}
	/*定义动画*/
	@keyframes mymove{
		0%{left: 0px;top: 0px;}
		25%{left: 500px;top: 0px;}
		50%{left: 500px;top: 500px;}
		75%{left: 0px;top: 500px;}
		100%{left: 0px;top: 0px;}
	}
	
	#main{
		
		animation: mymove 2s ease 1s infinite alternate;
	}
	#main:hover{
		animation-play-state: paused;
	}
	</style>
</head>
<body>
<div id="main"></div>
</body>
</html>